<template>
  <div>
    <el-dialog :title="modalNumber===1?'接待信息':'咨询详情'" :visible.sync="modalShow" width="60%" :before-close="modalClose" center>
      <el-card v-if="modalNumber===1" class="box-card">
        <div v-for="(item,index) in info1" v-show="item.infos!=null" :key="index" class="text item">
          {{ item.name+':'+item.infos }}
        </div>
      </el-card>
      <el-card v-if="modalNumber===2" class="box-card">
        <div v-for="(item,index) in info2" v-show="item.infos!=null" :key="index" class="text item">
          {{ item.name+':'+item.infos }}
        </div>
        <div>
          附件
          <!-- <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <i class="el-icon-plus" />
          </el-upload> -->
          <div>
            <img v-for="(urls,index) in imgList" :key="index" :src="urls" class="imgStyle">
          </div>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </el-card>
    </el-dialog>
    <!-- <el-dialog title="咨询详情" :visible.sync="modalShow" width="60%" :before-close="modalClose" center>

    </el-dialog> -->
  </div>

</template>

<script>
export default {
  name: "Index",
  props: {
    modalNumber: {
      type: Number,
      default: 1,
    },
    ids: {
      type: [Number, String],
      default: '',
    },
    url: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      modalShow: false,
      dialogImageUrl: '',
      dialogVisible: false,
      info1: [
        {
          name: '顾客',
          info: 'customerName',
        },
        {
          name: '接待人',
          info: 'accepterName',
        },
        {
          name: '接待时间',
          info: 'createdTime',
        },
        {
          name: '就诊类型',
          info: 'treatType',
        },
        {
          name: '意向项目',
          info: 'intentCaseName',
        },
        {
          name: '现场咨询',
          info: 'adviserName',
        },
      ],
      info2: [
        {
          name: '咨询方式',
          info: 'advisoryType',
        },
        {
          name: '主需求',
          info: 'oneDemand',
        },
        {
          name: '次需求1',
          info: 'towDemand',
        },
        {
          name: '次需求2',
          info: 'threeDemand',
        },
        {
          name: '正在服用药物',
          info: 'usingDrug',
        },
        {
          name: '健康状况',
          info: 'healthStatus',
        },
        {
          name: '主诉',
          info: 'appeal',
        },
        {
          name: '诊断',
          info: 'diagnosisResult',
        },
        {
          name: '处理方案',
          info: 'handPlane',
        },
        {
          name: '未成交原因',
          info: 'loseReason',
        },
      ],
      imgList: [],
    };
  },
  watch: {
    ids: {
      handler: function(newId) {
        this.fetchDetails(this.url, newId);
      },
    },
  },
  created() {
    this.fetchDetails(this.url, this.ids);
  },
  methods: {
    fetchDetails(url, id) { // 请求详情的数据
      this.imgList = [];
      this.$api[url]({ id }).then(res => {
        if (res.code !== 200) return;
        if (res.data.attachUrl) {
          const idList = res.data.attachUrl.split(",");
          idList.forEach(id => {
            this.imgList.push(window.GLOBAL.FILE_SERVER + window.API_VER.RABBIT_API_VER + '/base/attach/view/pic/' + id);
          });
          console.log(this.imgList);
        }
        this.modalNumber === 1 ? this.info1.forEach((item, i) => {
          const a = item.info;
          this.$set(item, 'infos', res.data[a]);
        })
          : this.info2.forEach((item, i) => {
            const a = item.info;
            this.$set(item, 'infos', res.data[a]);
          })
        ;
      });
    },
    init() {
      this.modalShow = true;
    },
    modalClose() {
      this.modalShow = false;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped lang='scss'>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}
.el-card {
  text-align: left;
  display: flex;
  justify-content: center;
  .text.item {
    padding: 10px 0;
  }
}
.imgStyle {
  height: 146px;
  widows: 146px;
  margin-right: 10px;
  margin-top: 10px;
}
</style>
